<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌列表</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"/>
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <!--查询表单-->
    <el-form :inline="true" :model="queryform" class="demo-form-inline">
        <el-form-item label="当前状态">

            <el-select v-model="queryform.status" placeholder="选择状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="企业名称">
            <el-input v-model="queryform.companyName" placeholder="请输入企业名称"></el-input>
        </el-form-item>

        <el-form-item label="品牌名称">
            <el-input v-model="queryform.brandName" placeholder="请输入品牌名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>

        <el-form-item>
            <el-button type="info" @click="onRest">重置</el-button>
        </el-form-item>
    </el-form>
    <!--按钮-->
    <el-row>

        <el-button type="danger"  @click="handleBatchDelete" size="mini">批量删除</el-button>
        <el-button type="primary" @click="handleAdd" size="mini">新增</el-button>
    </el-row>

    <!--表格-->
    <el-table
            :data="brands"
            stripe
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                align="center"
                width="55">
        </el-table-column>
        <el-table-column
                type="index"
                label="序号"
                align="center"
                width="50">
        </el-table-column>
        <el-table-column
                prop="brandName"
                label="品牌名称"
                align="center"
                width="180">
        </el-table-column>
        <el-table-column
                prop="companyName"
                label="企业名称"
                align="center"
               >
        </el-table-column>
        <el-table-column
                prop="ordered"
                width="50"
                align="center"
                label="排序">
        </el-table-column>
        <el-table-column

                prop="status"
                label="当前状态"
                align="center"
                width="180">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.status===1">启用</el-tag>
                <el-tag v-if="scope.row.status===0" type="danger">禁用</el-tag>
            </template>

        </el-table-column>
        <el-table-column label="操作"
                         align="center"
        >
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="success" plain
                        @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>


    <!---brand form对话框-->
    <el-dialog :title = "title" :visible.sync="dialogFormVisible">
        <el-form :model="brandForm">
            <el-form-item label="品牌名称" :label-width="formLabelWidth">
                <el-input v-model="brandForm.brandName"  ></el-input>
            </el-form-item>
            <el-form-item label="企业名称" :label-width="formLabelWidth">
                <el-input v-model="brandForm.companyName" ></el-input>
            </el-form-item>
            <el-form-item label="排序" :label-width="formLabelWidth">
                  <el-input-number v-model="brandForm.ordered"  :min="1" :max="100" label="排序"></el-input-number>
            </el-form-item>
            <el-form-item label="描述信息" :label-width="formLabelWidth">
                <el-input v-model="brandForm.description"   type="textarea" Rows:162></el-input>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
                <el-radio v-model="brandForm.status" label="1">启用</el-radio>
                <el-radio v-model="brandForm.status" label="0">禁用</el-radio>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
    </el-dialog>

</div>
<script>
    var vm = new Vue({
        el:'#app',
        data : {
            title:'',
            formLabelWidth: '120px',
            //分页
            pageSize:10,
            total:0,
            currentPage: 1,
            dialogFormVisible: false,
            queryform: {
                status: '',
                companyName: '',
                brandName:''
            },
            brandForm:{
                id:undefined,
                brandName:undefined,
                companyName:undefined,
                ordered:1,
                status:'1',
                description:undefined
            },
            brands: [],
            brandIds:[]  //批量删除ID
        },
        mounted(){
          this.getBrandList();
        },
        methods:{
            getBrandList() {

                //1.获取表格对象
                var table = document.getElementById("brandTable");

                //2.发送ajax请求
                axios({
                    url: '/brand-case-vue-element/brandAll?'+new Date().getTime()+'&pageSize='+this.pageSize+'&currentPage='+this.currentPage,
                    method: 'POST',
                    data: this.queryform
                }).then((response) => {
                    //3.获取响应数据
                    this.brands = response.data.rows;
                    this.total = response.data.total;
                    this.currentPage = response.data.currentPage;
                    this.pageSize = response.data.pageSize;
                })

            },
            onSubmit() {
                this.getBrandList()
            },
            handleEdit(index, row) {
                //数据回显
                let id = row.id
                this.title = "修改品牌"
                axios({
                    url:'/brand-case-vue-element/brandSel?id='+id,
                    method:'GET'
                }).then((response)=>{

                    this.brandForm = response.data
                    this.brandForm.status = this.brandForm.status+''
                    this.dialogFormVisible = true

                })

            },
            /**重置表单*/
            reset()
            {
                this.brandForm = {
                    id:undefined,
                    brandName:undefined,
                    companyName:undefined,
                    ordered:1,
                    status: '1',
                    description:undefined}
            },
            /**新增按钮事件*/
            handleAdd() {
                //1.改一下显示的标题
                this.title = "添加品牌"
                this.dialogFormVisible = true
                this.reset()
            },
            /**提交表单*/
            submitForm(){
                let reqUrl = "/brand-case-vue/brandAdd";
               //1.判断是否是新增修改
               if(this.brandForm.id == undefined || this.brandForm.id == null || this.brandForm.id == '')
               {
                   reqUrl = "/brand-case-vue-element/brandAdd";
               }else{
                   reqUrl = "/brand-case-vue-element/brandEdit";
               }


                //3.发送Ajax请求
                axios({
                    url: reqUrl,
                    data: this.brandForm,
                    method: 'POST'
                }).then((response) => {
                    this.dialogFormVisible = false
                    //成功跳转列表页
                    if (response.data) {
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                        //重新调用加载数据列表
                       this.getBrandList()
                    } else {

                        this.$message({
                            type: 'error',
                            message: '曹操失败!'
                        });
                    }
                })
            },
            /**重置表单*/
            onRest(){
             this.  queryform = {
                    status: '',
                        companyName: '',
                        brandName:''
                }
                this.getBrandList()
            },
            handleDelete(index, row) {


                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    axios({
                        url: '/brand-case-vue-element/brandDel?id=' + row.id,
                        method: 'GET'
                    }).then((response) => {

                        if (response.data) {

                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getBrandList();
                        } else {

                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }

                    })


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });




            },
            handleSizeChange(val) {
                this.pageSize = val
                this.getBrandList()
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.getBrandList()
                console.log(`当前页: ${val}`);
            },
            handleSelectionChange(val) {

                this.brandIds = []
                for (let i=0;i< val.length;++i)
                {
                    this.brandIds[i] = val[i].id
                }

            },
            /**批量删除*/
            handleBatchDelete(){

                if(this.brandIds.length == 0)
                {
                    this.$message({
                        type: 'info',
                        message: '请选择删除的记录!'
                    });
                    return
                }

                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    axios({
                        url: '/brand-case-vue-element/brandDelBatch',
                        method: 'POST',
                        data: this.brandIds

                    }).then((response) => {

                        if (response.data) {

                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getBrandList();
                        } else {

                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }

                    })


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            }
        }
    })
</script>
</body>
</html>